<template>
  <view class="detail-view">
    <view class="top-view clearfix"></view>
    <view class="form-cont">
      <view class="customer-view">
        <view
          class="title clearfix"
          @click="goPage('/pagesT/customer/selCustomer')"
        >
          <view class="float_left ellipsis">{{ add_form.customerName }}</view>
          <view class="float_right"
            ><u-icon color="#879BBA" name="arrow-right" size="24"></u-icon
          ></view>
        </view>
        <view class="address-view">
          <view class="remark_cont" v-if="add_form.customerName === '选择客户'"
            >+{{
              add_form.deliveryType !== 2 ? "选择收货信息" : "选择自提点"
            }}</view
          >
          <block v-else>
            <view
              @click="openSelect('address_show')"
              class="remark_particulars"
              v-if="add_form.deliveryType !== 2"
            >
              <block v-if="address_list.length > 0">
                <view class="clearfix">
                  <view class="float_left"
                    >联系人：{{
                      address_list[address_index].name || "--"
                    }}</view
                  >
                  <view class="float_right" style="color: #fb5904">{{
                    address_list[address_index].mobile || "--"
                  }}</view>
                </view>
                <view class="site">
                  {{ address_list[address_index].area.provinceName
                  }}{{ address_list[address_index].area.cityName
                  }}{{ address_list[address_index].area.districtName
                  }}{{ address_list[address_index].area.address }}
                </view>
              </block>
              <block v-else>
                <view style="text-align: left">
                  <text style="margin-right: 30rpx">暂无收货信息</text>
                  <u-icon name="plus" size="24" color="#FB5904"></u-icon>
                  <text
                    style="color: #fb5904"
                    @click="
                      goPage(
                        `/pagesT/order/AddShippingAddress?customerId=${add_form.customerId}`
                      )
                    "
                    >去新增</text
                  >
                </view>
              </block>
              <view class="arrow-right-icon"
                ><u-icon color="#879BBA" name="arrow-right" size="24"></u-icon
              ></view>
            </view>
            <view
              @click="openSelect('express_show')"
              class="remark_particulars"
              v-else
            >
              <block v-if="self_express_list.length > 0">
                <view class="clearfix">
                  <view class="float_left"
                    >自提点：{{
                      self_express_list[express_rule_index].name || "--"
                    }}</view
                  >
                  <view class="float_right" style="color: #fb5904">{{
                    self_express_list[express_rule_index].mobile || "--"
                  }}</view>
                </view>
                <view class="site">{{
                  self_express_list[express_rule_index].addressName
                }}</view>
              </block>
              <block v-else>
                <view style="text-align: left">
                  <text style="margin-right: 30rpx">暂无自提点</text>
                  <u-icon name="plus" size="24" color="#FB5904"></u-icon>
                  <text
                    style="color: #fb5904"
                    @click="
                      goPage(
                        `/pagesT/order/AddShippingAddress?customerId=${add_form.customerId}`
                      )
                    "
                    >去新增</text
                  >
                </view>
              </block>
              <view class="arrow-right-icon"
                ><u-icon color="#879BBA" name="arrow-right" size="24"></u-icon
              ></view>
            </view>
          </block>
        </view>
      </view>
      <view class="form-model-view">
        <view class="title clearfix">
          <view class="float_left ellipsis">商品清单</view>
          <view class="float_right"
            >共{{ goods_list.length }}种商品，{{ numTotal }}件</view
          >
        </view>
        <view class="btn" v-if="!goods_list.length" @click="selGoods"
          >选择商品</view
        >
        <view class="goods-view" v-if="goods_list.length">
          <block v-for="(item, index) in goods_list" :key="index"
            ><image
              v-if="index <= 4"
              :src="item.images[0]"
              mode="aspectFill"
            ></image
          ></block>
          <view class="more-goods" @click="openSelect('sel_pop')"
            >查看详情</view
          >
        </view>

        <view
          class="form-item clearfix"
          style="border-top: 1px solid #ecf0f7; padding-top: 20rpx"
        >
          <view class="label">配送方式</view>
          <view class="value">
            <u-input
              :placeholder-style="inputStyle"
              class="dis-input"
              placeholder="请选择配送方式"
              disabled
              v-model="deliveryType_name"
              @click="openDelivery"
            />
            <u-icon name="arrow-right" size="24" color="#CAD0D7"></u-icon>
          </view>
        </view>
        <view class="form-item clearfix" v-if="add_form.deliveryType === 3">
          <view class="label">物流类型</view>
          <view class="value">
            <u-input
              :placeholder-style="inputStyle"
              class="dis-input"
              placeholder="请选择物流类型"
              disabled
              v-model="particularsType_name"
              @click="particularsType_show = true"
            />
            <u-icon name="arrow-right" size="24" color="#CAD0D7"></u-icon>
          </view>
        </view>
        <view class="form-item clearfix">
          <view class="label">支付方式</view>
          <view class="value">
            <u-input
              :placeholder-style="inputStyle"
              class="dis-input"
              placeholder="请选择支付方式"
              disabled
              v-model="payType_name"
              @click="payType_show = true"
            />
            <u-icon name="arrow-right" size="24" color="#CAD0D7"></u-icon>
          </view>
        </view>
      </view>
      <view class="form-model-view">
        <view class="form-item clearfix importend-item">
          <view class="label">商品总额</view>
          <view class="value">{{ $utils.formattedNumber(totalMoney) }}</view>
        </view>
        <view class="form-item clearfix">
          <view class="label">订单优惠</view>
          <view class="value error-value">
            <input
              placeholder="请输入订单优惠"
              placeholder-class="input-pl"
              :disabled="!$accessCheck($Access.OrderAddeditGoodsPrice)"
              class="dis-input input-sj"
              type="digit"
              @focus="totalReduceMoneyFocus"
              @blur="totalReduceMoneyBlur"
              v-model="add_form.totalReduceMoney"
            />
          </view>
        </view>
        <view class="form-item clearfix">
          <view class="label">应收</view>
          <view class="value">{{ $utils.formattedNumber(payMoney) }}</view>
        </view>
        <view class="form-item clearfix">
          <view class="label">实收</view>
          <view class="value error-value">
            <input
              class="dis-input input-sj"
              placeholder="请输入实收金额"
              placeholder-class="input-pl"
              :disabled="!$accessCheck($Access.OrderAddeditGoodsPrice)"
              type="digit"
              @focus="receivedMoneyFocus"
              @blur="receivedMoneyBlur"
              v-model="add_form.receivedMoney"
            />
          </view>
        </view>
        <view class="form-item clearfix importend-item">
          <view class="label">结算账户</view>
          <view class="value">
            <u-input
              :placeholder-style="inputStyle"
              class="dis-input"
              @click="
                goPage('/pagesT/account/selAccount?shopId=' + account_shopId)
              "
              placeholder="请选择结算账户"
              disabled
              v-model="accountName"
            />
            <u-icon name="arrow-right" size="24" color="#CAD0D7"></u-icon>
          </view>
        </view>
      </view>
      <view class="form-model-view">
        <view class="bz-label">订单备注</view>
        <view class="bz-value"
          ><u-input type="textarea" v-model="add_form.remark"
        /></view>
      </view>
    </view>
    <u-select
      @confirm="particularsTypeChange"
      v-model="particularsType_show"
      label-name="label"
      value-name="value"
      :list="particularsType_list"
    ></u-select>
    <u-select
      @confirm="deliveryTypeChange"
      v-model="delivery_show"
      label-name="title"
      value-name="deliveryType"
      :list="deliveryType_list"
    ></u-select>
    <u-select
      @confirm="payTypeChange"
      v-model="payType_show"
      label-name="label"
      value-name="value"
      :list="payType_list"
    ></u-select>
    <u-popup v-model="sel_pop" mode="bottom">
      <view class="sel-goods-pop">
        <view class="pop-tit clearfix">
          <view class="float_left">本次已选商品</view>
          <view class="float_right" @click="clearGoods">
            <text class="custom-icon custom-icon-shanchu"></text>
            <text>清空</text>
          </view>
        </view>
        <scroll-view class="goods-ul" scroll-y>
          <view
            class="goods-li"
            v-for="(item, index) in goods_list"
            :key="index"
          >
            <view class="goods-name">{{ item.title }}</view>
            <view class="goods-code clearfix">
              <view class="float_left">{{ item.code }}</view>
              <view class="float_right price-input-view">
                <text class="label">单价：</text>
                <input
                  :disabled="!$accessCheck($Access.OrderAddeditGoodsPrice)"
                  class="price-input"
                  type="digit"
                  v-model="item.salePrice"
                />
                <text class="yuan">元</text>
              </view>
            </view>
            <view class="goods-code clearfix">
              <view class="float_left">
                {{ item.unitName }};
                <text v-for="(sku, skuI) in item.specGroup" :key="skuI"
                  >{{ sku.specValueName }};</text
                >
              </view>
              <view class="float_right" v-if="item.isEq === 4">
                <u-number-box
                  :min="0"
                  :index="index"
                  @change="addBuyNumChange"
                  :value="item.buyNum"
                ></u-number-box>
              </view>
              <view class="float_right" v-else>
                <view class="price-input-view" style="margin-bottom: 10rpx">
                  <text class="label">数量：</text>
                  <input
                    class="price-input"
                    type="digit"
                    v-model="item.buyNum"
                  />
                </view>
                <view class="price-input-view">
                  <text class="label" style="left: -120rpx">其他单位：</text>
                  <input
                    class="price-input"
                    type="digit"
                    v-model="item.otherNum"
                  />
                </view>
              </view>
            </view>
            <text
              class="custom-icon custom-icon-shanchu"
              @click="delGoods(index)"
            ></text>
          </view>
          <view style="padding-top: 100rpx" v-if="!goods_list.length"
            ><u-empty text="未选择商品" mode="data"></u-empty
          ></view>
        </scroll-view>
      </view>
    </u-popup>
    <u-select
      v-model="address_show"
      value-name="id"
      label-name="name"
      :list="address_list"
      @confirm="addressChange"
    ></u-select>
    <u-select
      v-model="express_show"
      value-name="id"
      label-name="name"
      :list="self_express_list"
      @confirm="expressChange"
    ></u-select>
    <view class="detail-bottom"
      ><u-button
        class="handel-btn"
        @click="submit"
        :loading="sub_load"
        :ripple="true"
        type="primary"
        >提交订单</u-button
      ></view
    >
    <Tabbar v-model="tabbar_current"></Tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabbar_current: 2,
      sub_load: false,
      sel_pop: false,
      express_show: false,
      address_show: false,
      goodsData: "",
      customerData: "",
      AccountData: "",
      goods_list: [],
      address_list: [],
      address_index: 0,
      deliveryType_list: [], //配送方式
      payType_list: [
        {
          label: "货到付款",
          value: 3,
        },
        {
          label: "先款后货",
          value: 9,
        },
      ],
      particularsType_list: [
        {
          label: "物流专线",
          value: 4,
        },
        {
          label: "物流专车",
          value: 5,
        },
      ],
      self_express_list: [],
      deliveryType_name: "",
      particularsType_name: "", //物流详情名称
      particularsType: "", //物流详情id
      payType_name: "货到付款", //支付方式名称
      delivery_show: false,
      payType_show: false,
      account_shopId: "",
      payWay: 3, //支付方式
      express_rule_index: 0,
      accountName: "",
      shop_id: "",
      order_detail: {},
      add_form: {
        deliveryType: "",
        customerName: "选择客户",
        addressId: "",
        remark: "",
        accountList: "",
        currentAccountName: "",
        receivedMoney: 0,
        lists: [],
        totalMoney: 0,
        payMoney: 0,
        totalReduceMoney: 0,
        userCenterId: "",
        customerId: "",
        selfRuleId: "",
        selfRuleData: "",
        operatorName: "",
        payType: 3, //支付方式id
      },
      rules: {
        customerName: [
          {
            required: true,
            message: "请选择客户",
            // 可以单个或者同时写两个触发验证方式
            trigger: "change",
          },
        ],
      },
      particularsType_show: false,
    };
  },
  watch: {
    customerData(val) {
      if (val) {
        this.add_form.userCenterId = val.userCenterId;
        this.add_form.customerId = val.id;
        this.add_form.customerName = val.name;
        this.account_shopId = val.shopId;
        // 获取客户收货地址列表
        if (this.add_form.deliveryType !== 2) {
          this.getAllShippingAddress();
        }
      }
    },
    goodsData(val) {
      if (val) {
        uni.removeStorageSync("orderGoods");
        this.goods_list = val;
      }
    },
    AccountData(val) {
      if (val) {
        this.accountName = val.name;
        this.add_form.accountList = [
          {
            accountId: val.id,
            accountNumber: val.accountNumber,
            accountName: val.name,
            money: this.add_form.receivedMoney,
            discountMoney: 0,
            finalMoney: this.add_form.receivedMoney,
            payWay: this.payWay,
            remark: val.remark,
          },
        ];
      }
    },
  },
  computed: {
    userName() {
      return this.$store.state.userInfo.name;
    },
    numTotal() {
      if (!this.goods_list.length) {
        return 0;
      } else if (this.goods_list.length === 1) {
        return Number(this.goods_list[0].buyNum);
      } else {
        let sum = 0;
        this.goods_list.forEach((item) => {
          sum = sum + Number(item.buyNum);
        });
        return sum;
      }
    },
    // 商品总额
    totalMoney() {
      if (!this.goods_list.length) {
        return 0;
      } else if (this.goods_list.length === 1) {
        return (
          Number(this.goods_list[0].buyNum) *
          Number(this.goods_list[0].salePrice)
        );
      } else {
        let sum = 0;
        this.goods_list.forEach((item) => {
          sum = sum + Number(item.buyNum) * Number(item.salePrice);
        });
        return sum;
      }
    },
    payMoney() {
      return this.totalMoney - this.add_form.totalReduceMoney;
    },
  },
  onShow() {
    this.getAllShippingAddress();
  },
  onLoad(options) {
    if (options.customer) {
      const customer = JSON.parse(options.customer);
      this.add_form.userCenterId = customer.userCenterId;
      this.add_form.customerId = customer.customerId;
      this.add_form.customerName = customer.customerName;
      this.account_shopId = customer.shopId;
      // 获取客户收货地址列表
      this.getAllShippingAddress();
    }
    if (options.id) {
      this.order_id = options.id;
      this.add_form.userCenterId = options.userCenterId;
      uni.setNavigationBarTitle({
        title: "编辑订单",
      });
      this.getOrderInfoById();
    } else {
      this.add_form.currentAccountName = this.userName;
    }
    this.getAllDelivery();
    // 获取自提点
    this.getAllSelfExpressRule();
  },
  methods: {
    // 详情
    getOrderInfoById() {
      this.$u.api
        .getOrderInfoById(this.add_form.userCenterId, {
          orderId: this.order_id,
        })
        .then(({ data }) => {
          uni.stopPullDownRefresh();
          this.order_detail = data;
          this.deliveryType_name = data.deliveryName;
          if (data.accountList && data.accountList.length) {
            this.accountName = data.accountList[0].accountName;
          }

          //由于订单是按照店铺拆单的
          // 所以在编辑订单时，增加此订单的商品时应该只能选择本店铺下的商品
          this.shop_id = data.shopId;
          this.account_shopId = data.shopId;
          this.add_form = {
            deliveryType: data.deliveryType,
            customerName: data.customerName,
            addressId: "",
            remark: data.remark,
            accountList: data.accountList,
            currentAccountName: data.currentAccountName,
            receivedMoney: data.receivedMoney,
            totalMoney: data.totalMoney,
            payMoney: data.payMoney,
            totalReduceMoney: data.totalReduceMoney,
            userCenterId: data.userCenterId,
            customerId: data.customerId,
            selfRuleId: data.selfRuleId,
            selfRuleData: data.selfRuleData,
            operatorName: data.operatorName,
            payType: Number(data.payType),
          };
          if (this.add_form.payType === 9) {
            this.payType_name = "先款后货";
          }
          if (this.add_form.deliveryType === 4) {
            this.add_form.deliveryType = 3;
            this.deliveryType_name = "物流";
            this.particularsType = 4;
            this.particularsType_name = "物流专线";
          }
          if (this.add_form.deliveryType === 5) {
            this.add_form.deliveryType = 3;
            this.deliveryType_name = "物流";
            this.particularsType = 5;
            this.particularsType_name = "物流专车";
          }
          this.goods_list = data.goodsData.map((item) => {
            return {
              ...item,
              salePrice: item.price,
              title: item.goodsName,
              code: item.goodsCode,
            };
          });
          if (data.customerId) {
            // 获取客户收货地址列表
            this.getAllShippingAddress(
              this.add_form.deliveryType !== 2 ? data.receiveData.id : ""
            );
          }
          // if (this.add_form.deliveryType === 2) {
          // 	const selfRuleData = JSON.parse(data.selfRuleData);
          // } else {
          // 	const receiveData = data.receiveData;
          // }
        })
        .catch((err) => {
          uni.stopPullDownRefresh();
        });
    },
    openSelect(key) {
      this[key] = true;
    },
    selGoods() {
      if (!this.add_form.customerId) {
        this.$u.toast("请选择客户");
        return;
      }
      uni.setStorageSync("orderGoods", JSON.stringify(this.goods_list));
      this.goPage("/pagesT/goods/selGoods?userCenterId=" + this.shop_id);
    },
    // 配送方式
    getAllDelivery() {
      this.$u.api
        .getAllDelivery({
          page: 1,
          pageSize: 100,
        })
        .then((res) => {
          this.deliveryType_list = res.data;
          const defaultType = res.data.find((item) => item.defaultStatus === 5);
          if (defaultType && !this.add_form.deliveryType) {
            this.add_form.deliveryType = defaultType.deliveryType;
            this.deliveryType_name = defaultType.title;
          }
        });
    },
    openDelivery() {
      this.delivery_show = true;
    },
    getAllShippingAddress(id) {
      this.$u.api
        .getAllShippingAddress(this.add_form.customerId)
        .then((res) => {
          if (res.data.length) {
            this.add_form.addressId = res.data[0].id;
            this.address_list = res.data.map((item) => {
              return {
                ...item,
                name: item.name || item.mobile,
              };
            });
          } else {
            this.address_list = [];
          }
        });
    },
    // 获取自提点
    getAllSelfExpressRule() {
      this.$u.api.getAllSelfExpressRule().then((res) => {
        this.self_express_list = res.data.map((item) => {
          return {
            ...item,
            name: item.setData.name,
            mobile: item.setData.mobile,
            addressName:
              item.setData.provinceName +
              "-" +
              item.setData.cityName +
              "-" +
              item.setData.districtName +
              "-" +
              item.setData.address,
          };
        });

        if (res.data.length) {
          this.add_form.selfRuleId = res.data[0].id;
          this.add_form.selfRuleData = res.data[0].setData;
        }
      });
    },
    // 配送方式
    deliveryTypeChange(arr) {
      this.add_form.deliveryType = arr[0].value;
      this.deliveryType_name = arr[0].label;
      if (arr[0].value === 1) {
        this.getAllShippingAddress(this.add_form.customerId);
      } else if (arr[0].value === 2) {
        if (this.self_express_list.length) {
          const target = this.self_express_list[0];
          this.add_form.selfRuleId = target.id;
          this.add_form.selfRuleData = target.setData;
        }
      }
    },
    payTypeChange(e) {
      this.payType_name = e[0].label;
      this.add_form.payType = e[0].value;
    },
    particularsTypeChange(e) {
      this.particularsType_name = e[0].label;
      this.particularsType = e[0].value;
    },
    addressChange(arr) {
      this.add_form.addressId = arr[0].value;
      this.address_index = this.address_list.findIndex(
        (item) => item.id === arr[0].value
      );
    },
    expressChange(arr) {
      this.add_form.selfRuleId = arr[0].value;
      this.add_form.selfRuleData = arr[0].setData;
      this.express_rule_index = this.self_express_list.findIndex(
        (item) => item.id === arr[0].value
      );
    },
    submit() {
      if (!this.goods_list.length) {
        this.$u.toast("请选择商品");
        return;
      }
      if (
        this.add_form.receivedMoney > 0 &&
        !this.add_form.accountList.length
      ) {
        this.$u.toast("请选择结算账户");
        return;
      }
      let lists = this.goods_list.map((item) => {
        return {
          skuId: item.skuId,
          code: item.code,
          goodsId: item.id,
          buyNum: item.buyNum,
          otherNum: item.otherNum,
          shopId: item.shopId,
          basicGoodsId: item.basicGoodsId || item.goodsBasicId,
          goodsName: item.title,
          unitName: item.unitName,
          specGroup: item.specGroup,
          inventory: item.inventory,
          salePrice: item.salePrice,
          subMoney: item.salePrice * item.buyNum,
          shopName: item.shopName,
          goodsImages: item.images[0],
          brandId: item.brandId,
          brandName: item.brandName,
          categoryPath: item.categoryPath,
          categoryName: item.categoryName,
          conversion: item.conversion,
          barCode: item.barCode,
          storageCode: item.storage,
          warehouseId: item.warehouseId,
          originPrice: item.originPrice,
          specType: item.specType,
          supplierId: item.supplierId,
          supplierName: item.supplierName,
          isEq: item.isEq,
        };
      });

      let params = {
        ...this.add_form,
        totalMoney: this.totalMoney,
        payMoney: this.payMoney,
        operatorName: this.userName,
      };
      if (this.particularsType) {
        params.deliveryType = this.particularsType;
      }
      // this.$refs.uForm.validate(valid => {
      // if (valid) {
      if (this.order_id) {
        params.goodsData = lists.map((item) => {
          return {
            ...item,
            goodsCode: item.code,
            images: [item.goodsImages],
            price: item.salePrice,
            totalMoney: item.subMoney,
          };
        });
        this.sub_load = true;
        this.$u.api
          .newOrderEdit(this.order_id, {
            ...this.order_detail,
            ...params,
          })
          .then((res) => {
            this.sub_load = false;
            this.$u.toast("修改成功");
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          })
          .catch((res) => {
            this.sub_load = false;
          });
      } else {
        params.lists = lists;
        this.sub_load = true;
        this.$u.api
          .newAddOrder(params)
          .then((res) => {
            this.sub_load = false;
            this.$u.toast("下单成功");
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          })
          .catch((res) => {
            this.sub_load = false;
          });
      }
      // }
      // });
    },
    delGoods(index) {
      this.goods_list.splice(index, 1);
      if (!this.goods_list.length) {
        this.sel_pop = false;
      }
    },
    addBuyNumChange({ value, index }) {
      const target = this.$u.deepClone(this.goods_list);
      if (Number(value) === 0) {
        target.splice(index, 1);
      } else {
        target[index].buyNum = value;
      }
      this.goods_list = target;
    },
    clearGoods() {
      this.goods_list = [];
      this.sel_pop = false;
    },
    barCode() {
      if (!this.add_form.customerId) {
        this.$u.toast("请选择客户");
        return;
      }
      uni.scanCode({
        scanType: ["barCode"],
        success: (res) => {
          this.sendBarCode(res.result);
        },
      });
    },
    sendBarCode(result) {
      this.$u.api
        .getGoodsByBarCode({
          barCode: result,
        })
        .then((res) => {
          const detail = res.data.detail;
          const index = this.goods_list.findIndex(
            (item) => item.skuId === detail.skuId
          );
          if (index !== -1) {
            this.$u.toast("该商品已存在");
            return;
          } else {
            this.goods_list.push({
              ...detail,
              buyNum: 1,
            });
          }
        });
    },
    // 实收输入框获取焦点
    receivedMoneyFocus(key) {
      if (!this.add_form.receivedMoney || this.add_form.receivedMoney <= 0) {
        this.add_form.receivedMoney = "";
      }
    },
    // 实收输入框失去焦点
    receivedMoneyBlur() {
      if (!this.add_form.receivedMoney || this.add_form.receivedMoney <= 0) {
        this.add_form.receivedMoney = 0;
      }
    },
    // 订单优惠输入框获取焦点
    totalReduceMoneyFocus(key) {
      if (
        !this.add_form.totalReduceMoney ||
        this.add_form.totalReduceMoney <= 0
      ) {
        this.add_form.totalReduceMoney = "";
      }
    },
    // 订单优惠输入框失去焦点
    totalReduceMoneyBlur() {
      if (
        !this.add_form.totalReduceMoney ||
        this.add_form.totalReduceMoney <= 0
      ) {
        this.add_form.totalReduceMoney = 0;
      }
    },
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    // this.$refs.uForm.setRules(this.rules);
  },
};
</script>

<style lang="scss" scoped>
.top-view {
  background: linear-gradient(180deg, #fb5904, #fb7a37, #ff8f59, #f5f5f6 100%);
  height: 360rpx;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -1;
}

.form-cont {
  transform: translateY(70rpx);
  position: relative;
  z-index: 1;
  padding-bottom: 80rpx;
  .form-model-view {
    width: 710rpx;
    background-color: #ffffff;
    margin: 16rpx auto;
    border-radius: 12rpx;
    padding: 16rpx 32rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    .title {
      padding: 24rpx 0;
      .float_left {
        font-size: 28rpx;
        font-weight: 600;
        color: #333333;
      }
      .float_right {
        font-size: 28rpx;
        color: #999999;
      }
    }
    .btn {
      width: 646rpx;
      height: 106rpx;
      background-color: #f8f8f8;
      color: #fb5904;
      text-align: center;
      line-height: 106rpx;
      font-size: 28rpx;
      border-radius: 12rpx;
      margin: 0 auto 24rpx;
      border: 1px dashed #fb5904;
    }
    .goods-view {
      text-align: left;
      position: relative;
      width: 100%;
      margin-bottom: 24rpx;
      image {
        width: 102rpx;
        height: 102rpx;
        border-radius: 8rpx;
        margin: 0 6rpx;
        vertical-align: middle;
        border: 1px solid #f0f0f0;
      }

      .more-goods {
        width: 102rpx;
        height: 102rpx;
        border-radius: 8rpx;
        margin: 0 6rpx;
        display: inline-block;
        background-color: #f8f8f8;
        line-height: 102rpx;
        text-align: center;
        vertical-align: middle;
        font-size: 22rpx;
        color: #fb5904;
      }
    }
    .form-item {
      line-height: 80rpx;
      .label {
        float: left;
        color: #999999;
      }
      .value {
        float: right;
        width: 400rpx;
        text-align: right;
        .input-sj {
          border-bottom: 1px solid #fb5904;
        }
        &.error-value {
          color: #f67778;
        }
      }
      &.importend-item {
        .label {
          color: #333333;
          font-weight: bold;
        }
        .value {
          font-family: DIN-Medium;
          color: #333333;
        }
      }
    }
    .bz-label {
      line-height: 80rpx;
      font-weight: bold;
      color: #333333;
    }
  }
}

.customer-view {
  width: 710rpx;
  background-color: #ffffff;
  margin: 0 auto 34rpx;
  border-radius: 12rpx;
  padding: 0 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

  .title {
    padding: 32rpx 0 24rpx;

    .float_left {
      font-size: 32rpx;
      font-weight: 600;
      width: calc(100% - 120rpx);
      color: #333333;
    }
  }

  .address-view {
    border-top: 1px solid #f0f0f0;
    line-height: 48rpx;
    height: 142rpx;
    font-size: 28rpx;

    .remark_cont {
      width: 200rpx;
      margin: 0 auto;
      line-height: 142rpx;
      color: #fb5904;
      font-size: 28rpx;
    }

    .remark_particulars {
      padding: 24rpx 0;
      padding-right: 24rpx;
      color: #666666;
      font-size: 26rpx;
      position: relative;
      .arrow-right-icon {
        position: absolute;
        right: -10rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}

.sel-goods-pop {
  padding-bottom: 1px;

  .pop-tit {
    line-height: 70rpx;
    background-color: #ecf0f7;
    padding: 0 24rpx;
    .float_right {
      font-size: 24rpx;
      color: #666666;
      .custom-icon-shanchu {
        font-size: 26rpx;
        margin-right: 10rpx;
      }
    }
  }

  .goods-ul {
    min-height: 400rpx;
    max-height: 600rpx;

    .goods-li {
      padding: 24rpx;
      position: relative;
      border-bottom: 1px solid #f5f5f5;

      .goods-name {
        width: 660rpx;
      }

      .goods-code {
        padding-top: 10rpx;
        font-size: 24rpx;
        line-height: 50rpx;
        color: #879bba;

        .price-input-view {
          height: 50rpx;
          line-height: 50rpx;
          padding: 0 10rpx;
          border: 1px solid #ecf0f7;
          border-radius: 8rpx;
          width: 212rpx;
          text-align: center;
          color: #333333;
          position: relative;

          .label {
            position: absolute;
            left: -80rpx;
            top: 50%;
            display: block;
            transform: translateY(-50%);
          }

          .price-input {
            width: 150rpx;
            height: 50rpx;
            display: inline-block;
            vertical-align: middle;
            margin-right: 10rpx;
            transform: translateY(-4rpx);
            font-size: 24rpx;
          }

          .yuan {
            color: #879bba;
          }
        }
      }

      .custom-icon-shanchu {
        position: absolute;
        right: 24rpx;
        top: 24rpx;
        width: 40rpx;
        height: 40rpx;
        color: $uni-color-error;
      }
    }
  }

  .btn-view {
    width: 680rpx;
    height: 70rpx;
    line-height: 70rpx;
    border-radius: 10rpx;
    background-color: $uni-color-primary;
    color: #ffffff;
    text-align: center;
    margin: 20rpx auto;
  }
}

.detail-bottom {
  // position: fixed;
  // bottom: 0;
  // left: 0;
  margin: 40rpx auto;
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .handel-btn {
    width: 90%;
    height: 80rpx;
    border-radius: 40rpx;
    background: linear-gradient(90deg, #fb5904, #ff8f59);
    border-color: #fb5904;
    color: #ffffff;
    box-shadow: 0 4rpx 8rpx rgba(251, 89, 4, 0.3);
  }
}
</style>
